<template>
    <div class="wrapper">
        <top-bar class="top-bar" :shadow="true">
            <template v-slot:title>
                {{$t('Settings')}}
            </template>
        </top-bar>
        <div class="container">
            <div v-if="!permission" class="module mgb-24">
                <div class="title">Authority</div>
                <div class="cell">
                    <div class="header">
                        <div class="title">{{$t('Checkin Reminder')}}</div>
                    </div>
                    <div class="footer">
                        <van-switch v-if="!permission" :model-value="permission" @update:model-value="onSwitchUpdate" size=".28rem" inactive-color="#EBEDF5" active-color="black"/>
                    </div>
                </div>
            </div>
            <div class="module">
                <div class="title">Settings</div>
                <div v-if="showUpdate" class="cell" @click="clickUpdate">
                    <div class="header">
                        <div class="title">{{$t('Check update')}}</div>
                    </div>
                    <div class="footer">
                        <div class="tips">Version {{vueState.versionControl.version}}</div>
                        <div v-if="needUpdate" class="point"></div>
                        <div class="arrow"></div>
                    </div>
                </div>
                <div class="cell" @click="clickAbout">
                    <div class="header">
                        <div class="title">{{$t('About us')}}</div>
                    </div>
                    <div class="footer">
                        <div class="arrow"></div>
                    </div>
                </div>
            </div>
        </div>
        <update-modal v-model:show='updateModalData.show' @submit="updateModalData.submit" :version="updateModalData.version"></update-modal>
    </div>
</template>
<script>
import updateModal from '../../../components/Modal/UpdateModal.vue'
import {useSettings} from './components/useSettings.js'
import { inject,onMounted,onUnmounted, toRefs } from 'vue'
export default {
    components:{
        updateModal
    },
    setup(props) {
        const vueState = inject('vueState')
        const {state,updateModalData,getPermissionInfo,onSwitchUpdate,needUpdate,clickUpdate,clickAbout,setUpdateShow} = useSettings()
        onMounted(()=>{
            window.AdSDK.addEventListener('ad_permission',getPermissionInfo)
            window.SDKPostMessage({
                event: 'h5_permission',
            })
            setUpdateShow()
        })
        onUnmounted(()=>{
            window.AdSDK.removeEventListener('ad_permission',getPermissionInfo)
        })
        return {
            ...toRefs(state),
            vueState,
            updateModalData,
            onSwitchUpdate,
            needUpdate,
            clickUpdate,
            clickAbout
        }
    }
}
</script>
<style lang="less" scoped>
.mgb-24{margin-bottom: .24rem;}
.wrapper{
    height: 100%;
    .container{
        background-color:#F5F6F9;
        height: 100%;
        overflow-y: auto;
        padding-top: .24rem;
        .cell{
            height: .56rem;
            padding: 0 .12rem 0 .16rem;
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: .01rem solid #EDEDEF;
            &:last-child{
                border-bottom: none;
            }
            .title{
                font-size: .16rem;
                font-weight: 500;
                color:#121314;
                line-height: .28rem;
            }
            .footer{
                display: flex;
                align-items: center;
                /deep/ .van-tab {
                    line-height: 0.28rem;
                    z-index: 5;
                }
                .tips{
                    font-size: .14rem;
                    font-weight: 500;
                    color:#F5B53F;
                    margin-right: .1rem;
                }
                .point{
                    height:.06rem;
                    width: .06rem;
                    background-color:#FF4750;
                    border-radius: 50%;
                }
            }
            .arrow{
                height:.24rem;
                width: .24rem;
                background: url(../../../assets/images/right_arrow.png) no-repeat center;
                background-size: contain;
            }
        }
        .module{
            &>.title{
                padding:0 .16rem .06rem;
                font-size: .14rem;
                color:#9C9DA6;
                line-height: .22rem;
            }
        }
    }
}
</style>